<template>
  <div class="popover-item">
      <ul>
        <li class="popover-item-li" v-for="(item, index) in options" :key="index" :class="{ 'el-Dropdown_subItem_list': item.children }">
          <span class="popover-item-text" @click="handleClick(item)">
            <i :class="item.icon"></i>
            {{item.label}}
            <i class="el-icon-arrow-right" v-if="item.children"></i>
          </span>
          <div class="popover-sub-item" v-if="item.children">
            <ul>
              <li class="popover-item-text" v-for="(item2,index) in item.children" :key="index">
                <span class="popover-item-text" @click="handleClick(item2)">
                  {{item2.label}}
                </span>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
</template>

<script>
export default {
  props: {
    trigger: {
      type: String,
      default: 'click'
    },
    options: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    handleClick(data) {
      this.$emit('handleClick', data)
    }
  }
}
</script>

<style lang="scss" scoped>
.popover-item {
  ul{
    padding: 0;
    margin: 0;
    li {
      line-height: 35px;
      cursor: pointer;
    }
  }
  .popover-item-text {
    display: block;
    padding: 0 10px 0 20px;
    &:hover {
      background: #ecf5ff;
      color: #409EFF;
    }
  }
  .popover-item-li {
    position: relative;
    .popover-sub-item {
      display: none;
      position: absolute;
      top: 0;
      left: 135px;
      width: 110px;
      background: #fff;
      border-radius: 5px;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
      transition: all 0.5s ease;
      .popover-item-text{
        padding: 0 10px 0 10px;
      }
    }
  }
  .el-Dropdown_subItem_list {
    &:hover{
      .popover-sub-item {
        display: block;
      }
    }
  }
}
</style>
